<template>
  <div id="explosiveRank">
    <!-- 商品种类 -->
    <div class="updateTimewl">
      数据更新时间：
      <span style="color:#888">{{ timestamp(upTime, "Y-M-D h:m") }}</span>
    </div>
    <category_goods v-model="checkedDatasJoe" />
    <div class="btn_group">
      <button @click="generatorImage">
        <span></span>分享
      </button>
      <button @click="export_data">
        <span></span>导出
      </button>
    </div>
    <ul
      class="fixedThead"
      ref="fixedThead"
      :class="{ isShow: isFixed }"
      :style="showLeft == true ? 'left:222px' : 'left:98px'"
    >
      <li tc>排名</li>
      <li>商品</li>
      <li tc>直播价</li>
      <!-- <li
        tc
        @click="sort_fun(false, 2)"
        style="  cursor: pointer;"
        v-if="order_by == 'desc' && sort != '2'"
      >
        最低直播价
        <img
          src="@/assets/meng/down_up.png"
          v-if="order_by == 'desc' && sort == '2'"
        /><img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc v-if="order_by == 'desc' && sort == '2'">
        最低直播价
        <img
          src="@/assets/meng/down_up.png"
          v-if="order_by == 'desc' && sort == '2'"
        /><img src="@/assets/meng/no_down_up.png" v-else />
      </li>-->

      <li
        tc
        style="  cursor: pointer;"
        @click="sort_fun(false, 1)"
        v-if="order_by == 'desc' && sort != '1'"
      >
        近1小时销量
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc v-if="order_by == 'desc' && sort == '1'">
        近1小时销量
        <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc>近1小时销售额</li>
      <li tc>近1小时关联直播</li>
      <li tc>热卖直播间</li>
      <li tc>操作</li>
    </ul>
    <table class="table mt_14 table01" ref="tableEl">
      <thead>
        <tr>
          <th>排名</th>
          <th>商品</th>
          <th>直播价</th>
          <!-- <th
            @click="sort_fun(false, 2)"
            style="  cursor: pointer;"
            v-if="order_by == 'desc' && sort != '2'"
          >
            最低直播价
            <img src="@/assets/meng/down_up.png"
                 v-if="order_by=='desc'&&sort == '2'"><img src="@/assets/meng/no_down_up.png"
                 v-else>
          </th>-->
          <!-- <th v-if="order_by == 'desc' && sort == '2'">
            最低直播价
            <img src="@/assets/meng/down_up.png"
                 v-if="order_by=='desc'&&sort == '2'"><img src="@/assets/meng/no_down_up.png"
                 v-else>
          </th>-->
          <th
            style="  cursor: pointer;"
            @click="sort_fun(false, 1)"
            v-if="order_by == 'desc' && sort != '1'"
          >
            近1小时销量
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th v-if="order_by == 'desc' && sort == '1'">
            近1小时销量
            <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th>近1小时销售额</th>
          <th>近1小时关联直播</th>
          <th>热卖直播间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="dataList.length != 0">
        <tr v-for="(item, index) in dataList" :key="index" :id="!index ? 'tr1' : ''">
          <td>{{ item.rank }}</td>
          <td>
            <div class="goodsInfo">
              <img
                :src="item.proLogo"
                class="avator"
                @click="toGoodsDetails(item.proId, '0')"
                @error="defaultImgFn(shop,$event)"
              />
              <div class="goodsInfoRight">
                <div>
                  <!-- 来源 -->
                  <div>
                    <SourceIcon :sourceid="item.profrom" @click="toGoodsDetails(item.proId, '0')" />
                  </div>

                  <span @click="toGoodsDetails(item.proId, '0')">{{ item.proTitle }}</span>
                </div>
                <p @click="toShopDetails(item.shopId)">
                  店铺:
                  <span v-if="item.shopTitle != null">{{ item.shopTitle }}</span>
                  <span v-if="item.shopTitle == null">--</span>
                </p>
              </div>
            </div>
          </td>
          <td>
            <span
              class="price"
              v-if="
                item.livePrice == item.maxPrice ||
                  item.maxPrice == 0 ||
                  item.livePrice > item.maxPrice
              "
            >
              ￥
              <span>{{ item.livePrice }}</span>
            </span>

            <span class="price" v-if="item.maxPrice > item.livePrice">
              ￥
              <span>{{ format_num(item.livePrice) }}-{{ format_num(item.maxPrice) }}</span>
            </span>
          </td>
          <td>{{ format_num(item.volume) }}</td>
          <td>{{ format_num(item.sales) }}</td>
          <td>
            <div class="liveHourBox">
              <p>{{ format_num(item.oneHourLive) }}</p>
              <img
                src="@/assets/wang/work/liveroomIcon.png"
                @click="
                  GetLiveRoomsByProId(item.proId);
                  showHotRoom = true;
                "
              />
            </div>
          </td>
          <td>
            <div class="roomInfo" v-if="item.liveRooms != null">
              <div
                class="imgBox"
                @click="
                  toLiveDetails(
                    item.liveRooms.status,
                    item.liveRooms.roomId,
                    '0'
                  )
                "
              >
                <img :src="item.liveRooms.roomLogo" @error="defaultImgFn(liveVideo,$event)" />
                <div class="liveBox" v-if="item.liveRooms.status == 1">
                  <p class="livingGif" style="margin-left: 2px">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </p>
                </div>
              </div>
              <div class="roomRight">
                <div class="nameBox">
                  <p
                    @click="
                      toLiveDetails(
                        item.liveRooms.status,
                        item.liveRooms.roomId,
                        '0'
                      )
                    "
                    class="pointerWl"
                  >{{ item.liveRooms.roomTitle }}</p>

                  <el-popover placement="bottom" trigger="hover">
                    <vue-qr
                      :size="150"
                      :margin="0"
                      :auto-color="true"
                      :dot-scale="1"
                      :text="item.liveRooms.authorUrl"
                    />
                    <img
                      src="@/assets/wang/tdetails/ewm.png"
                      class="ewmImg"
                      slot="reference"
                      v-if="item.liveRooms"
                    />
                  </el-popover>
                </div>
                <p>
                  <span>人数峰值：{{ format_num(item.liveRooms.peoplePeak) }}</span>
                  <span>预估销量：{{ format_num(item.liveRooms.livevolume) }}</span>
                </p>
              </div>
            </div>
            <div v-if="item.liveRooms == null" class="text_01">该商品暂未关联直播</div>
          </td>
          <td>
            <div class="detailsBtnwl" @click="toGoodsDetails(item.proId, '0')">查看详情</div>
          </td>
        </tr>
      </tbody>
    </table>
    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <div class="empty addTop" v-show="!loading && dataList.length == 0 && !needBuy">
      <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
    </div>
    <!-- 权限不足 升级会员 -->
    <div class="upgradeBox" v-if="needBuy">
      <RankUpgrade class="rankUpgrade" />
    </div>
    <!-- <div class="upgradeBox" v-if="!loading && vipLevel==0 &&!needBuy">
      <RankUpgrade class="rankUpgrade" />
    </div> -->
    <div class="pageBox pageBox01" v-if="!loading">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="countRank"
        :page-size="30"
        :current-page="page"
        @current-change="getData"
        :hide-on-single-page="true"
      ></el-pagination>
    </div>
    <!-- 直播间弹窗 -->
    <el-dialog
      :visible.sync="showHotRoom"
      v-if="showHotRoom"
      top="10%"
      class="dialog01"
      custom-class="buyDialog"
      width="790px"
    >
      <div class="hotRoomBox">
        <p class="hotRoomTitle">仅显示该商品在关联直播间的销售数据</p>
        <div
          v-loading="roomLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <table class="table hotRoomTable">
            <thead>
              <tr>
                <th style="padding-left:30px">直播间</th>
                <th>预估销量(件）</th>
                <th>预估销售额</th>
                <th>人气峰值</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in showroomList" :key="index">
                <td style="width:260px">
                  <div class="roomInfo" style="padding-left:30px">
                    <div class="imgBox" @click="toLiveDetails(item.status, item.roomId, '0')">
                      <img :src="item.roomLogo" />
                      <div class="liveBox" v-if="item.status == 1">
                        <p class="livingGif">
                          <span></span>
                          <span></span>
                          <span></span>
                          <span></span>
                        </p>
                      </div>
                    </div>
                    <div class="roomRight">
                      <div class="nameBox">
                        <p
                          @click="toLiveDetails(item.status, item.roomId, '0')"
                          class="pointerWl"
                        >{{ item.roomTitle }}</p>
                      </div>
                      <p>{{ timestamp(item.beginTimespan, "M-D h:m") }}</p>
                    </div>
                  </div>
                </td>
                <td>{{ format_num(item.livevolume) }}</td>
                <td>{{ format_num(item.livesales) }}</td>
                <td>{{ format_num(item.peoplePeak) }}</td>
              </tr>
            </tbody>
          </table>
          <!-- <div v-if="count <= 5" class="Popupline">我是有底线的~</div> -->
          <div class="pageBox" v-if="showroomList && count > 5">
            <el-pagination
              background
              layout="prev, pager, next, jumper"
              :total="count"
              :page-size="5"
              :current-page="page01"
              @current-change="changePage"
              :hide-on-single-page="true"
            ></el-pagination>
            <!-- :hide-on-single-page="true" -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import category_goods from "@/component/category_goods";
import VueQr from "vue-qr";
import SourceIcon from "@/component/SourceIcon.vue";
import RankUpgrade from "@/component/rankUpgrade.vue";
import shop from "@/assets/img/shop.png";
import liveVideo from "@/assets/img/live-video.png";
export default {
  name: "popularProRank",
  components: { VueQr, SourceIcon, RankUpgrade, category_goods },
  data() {
    return {
      liveVideo: liveVideo,
      shop: shop,
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: [],
      },
      goodsKind: "全部",
      busy: false,
      loading: true,
      showList: false,
      isOpen: false,
      countRank: 0,
      page: 1,
      cancel: null,
      cancel01: null,
      dataList: [],
      openid: "a",
      needBuy: false,
      roomList: [],
      showroomList: [],
      roomLoading: false,
      showHotRoom: false,
      count: 0,
      page01: 1,
      isFixed: false,
      upTime: "",
      showLeft: true,
      order_by: "desc", //   表格头部排序
      sort: 1, //   表格头部排序
      updateTime: "",
      updateTime: new Date(),
      vipLevel: '',
    };
  },
  computed: {},
  watch: {
    checkedDatasJoe() {
      //新筛选组件用
      this.page = 1;
      this.dataList = [];
      this.getData();
    },
    goodsKind: function (newVal, oldVal) {
      this.page = 1;
      this.dataList = [];
      this.getData();
    },

    "$store.state.left_nav_flag"(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    },
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel');
    let that = this;
    that.updateTime = that.timestamp(
      that.updateTime.getTime() / 1000,
      "Y-M-D h:m:s"
    );
    this.getData();
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    window.addEventListener("resize", () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },

  methods: {
    // 头像默认图片显示
    defaultImgFn(url, e) {
      if (url == liveVideo) {
        e.target.src = liveVideo;
      } else if (url == shop) {
        e.target.src = shop;
      }
    },
    // 弹窗的前端排序方法
    // changeData() {
    //   this.roomList = this.roomList.sort(function(a, b) {
    //     return b.livevolume - a.livevolume;
    //   });
    //   this.showroomList = this.roomList.slice(0, 5);
    //   console.log(this.roomList);
    // },
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = "asc";
      } else {
        this.order_by = "desc";
      }
      switch (parm02) {
        case 1:
          this.sort = 1;
          break;
        case 2:
          this.sort = 2;
          break;
      }
      this.getData();
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector("#tr1");
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          let px1 = 0;
          for (let i = 0; i < liEls.length; i++) {
            if (i == liEls.length - 1) {
              px1 = 1;
            }
            liEls[i].style.width = tds[i].offsetWidth - px1 + "px";
          }
        }
      });
    },
    // 热门直播间分页
    changePage(n) {
      this.roomLoading = true;
      this.showroomList = this.roomList.slice(5 * (n - 1), 5 * n);
      this.$nextTick(() => {
        setTimeout(() => {
          this.roomLoading = false;
        }, 500);
      });
    },
    //   加载更多
    loadMore() {
      this.getData();
    },
    getData(i) {
      let that = this;
      that.dataList = [];
      that.loading = true;
      that.needBuy = false;

      // 商品类目
      if (i) {
        that.page = i;
        // 回到顶部
        that.backTop();
      }
      that.$axios
        .post(
          "/api/live/PostHotStyleGoods",
          {
            // proCategory: CategoryId,
            proCategory: this.checkedDatasJoe.parentId,
            categoryIds: this.checkedDatasJoe.childIds,
            index: that.page,
            size: 30,
            SortValue: that.sort,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code1 == 1013||res.data.code == 1013||res.data.code == 1003) {
            that.dataList = [];
            that.needBuy = true;
          }
          if (res.data.code == 0) {
            that.dataList = res.data.data.ranks;
            that.upTime = res.data.data.timespan;
            that.countRank = res.data.data.totalCount;
            this.setTBBar();
          } 
          that.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳小店
    toShopDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shopDetails/${id}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳直播详情
    toLiveDetails(item, id, tabNo) {
      if (item == 1) {
        let router = this.$router.resolve({
          path: `/live/${id}`,
        });
        window.open(router.href, "_blank");
      } else {
        let router = this.$router.resolve({
          path: `/talent_main/liveDetailsRoot/${id}/${tabNo}`,
        });
        window.open(router.href, "_blank");
      }
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
    // 获取直播间列表
    GetLiveRoomsByProId(proId) {
      let that = this;
      that.roomLoading = true;
      that.$axios
        .post(
          "/api/live/GetLiveRoomsByProId",
          {
            proId: proId,
            proCategory: this.checkedDatasJoe.parentId, //
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.roomList = res.data.data;
            that.count = res.data.data.length;
            that.showroomList = that.roomList.slice(0, 5);
            console.log(this.showroomList.length + "@@");
            that.roomLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > 220 ? true : false;
    },
    destroyed() {
      window.removeEventListener("scroll", this.initHeight);
    },
    // 导出分享
    generatorImage() {
      //分享截图

      if (this.dataList.length != 0) {
        var that = this;
        const loading = this.$loading({
          lock: true,
          text: "导出中...",
          spinner: "el-icon-loading",
          customClass: "customClass",
        });
        var shareContent;
        shareContent = this.$refs.tableEl; //需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement("canvas"); //创建一个canvas节点
        //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
        var scale = 1;
        canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale * scale; //定义canvas高度 *缩放
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
        var opts = {
          dpi: window.devicePixelRatio,
          scale: scale, // 添加的scale 参数
          useCORS: true,
          canvas: canvas, //自定义 canvas
          logging: true, //日志开关
        };
        html2canvas(shareContent, opts).then((canvas) => {
          let str;
          str = `《实时直播爆品榜-${this.timestamp(
            new Date().getTime() / 1000,
            "Y-M-D"
          )}》.png`;
          canvas.toBlob(
            function (blob) {
              const eleLink = document.createElement("a");
              eleLink.download = str;
              eleLink.style.display = "none";
              // 字符内容转变成blob地址
              eleLink.href = URL.createObjectURL(blob);
              // 触发点击
              document.body.appendChild(eleLink);
              eleLink.click();
              // 然后移除
              document.body.removeChild(eleLink);
            },
            "image/png",
            1
          );
          loading.close();
        });
      }
    },
    export_data() {
      if (this.dataList.length != 0) {
        let that = this;
        let xse = null;
        let str = `排名,商品名称,直播价,近1小时销量,近1小时销售额,近1小时关联直播,热卖直播间\n`;
        for (let i = 0; i < that.dataList.length; i++) {
          if(
            that.dataList[i].livePrice == that.dataList[i].maxPrice ||
            that.dataList[i].maxPrice == 0 ||
            that.dataList[i].livePrice > that.dataList[i].maxPrice){
            xse = that.dataList[i].livePrice
          }else if(that.dataList[i].maxPrice > that.dataList[i].livePrice){
            xse = that.format_num(that.dataList[i].livePrice)+'-'+that.format_num(that.dataList[i].maxPrice)
          }
        str += `${that.dataList[i].rank},\"${that.dataList[
          i
        ].proTitle.replace(/"/g, '""')}\",${xse},${
          that.format_num(that.dataList[i].volume)
          },${
            that.format_num(that.dataList[i].sales)
          },${that.format_num(that.dataList[i].oneHourLive)
          },${
          that.dataList[
            i
          ].liveRooms.roomTitle
          }\n`;
        }
        var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
        blob = new Blob([String.fromCharCode(0xfeff), blob], {
          type: blob.type,
        });
        let object_url = window.URL.createObjectURL(blob);
        var link = document.createElement("a");
        link.href = object_url;
        let str_name = `《实时直播爆品榜-${this.timestamp(
          new Date().getTime() / 1000,
          "Y-M-D"
        )}》.csv`;
        link.download = str_name;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        console.log(that.showroomList.length);
      }
    },
  },
};
</script>
<style lang="less" scoped>
#explosiveRank {
  overflow: hidden;
  background-color: #fff;
  min-height: 100vh;
  padding: 22px @padding-num 0;
  border-radius: 6px;
  // 导出 + 分享
  .btn_group {
    text-align: right;
    margin-bottom: 20px;
    justify-content: right;
    button {
      width: 70px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #555;
      text-align: center;
    }
    button:nth-of-type(2) {
      color: #67ac5b;
      border: 1px solid #67ac5b;
    }

    > button:nth-child(1) {
      margin-right: 10px;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url("../../../../assets/zhao/fenx.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    > button:nth-child(2) {
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url("../../../../assets/zhao/daoc.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    button:nth-of-type(1):hover {
      color: #777;
      span {
        background: url("../../../../assets/zhao/fenx_h.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    button:nth-of-type(2):hover {
      color: #80be76;
      border-color: #80be76;
      span {
        background: url("../../../../assets/zhao/daoc_h.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  //
  .loading {
    margin-top: 120px;
  }
  table {
    thead {
      tr {
        th {
          padding: 0 8px;
        }

        th:nth-of-type(2) {
          width: 24%;
        }
        // th:nth-of-type(4),
        // th:nth-of-type(5) {
        //   width: 10%;
        // }
        th:nth-of-type(7) {
          text-align: left;
          width: 30%;
          padding-left: 5%;
        }
        th:nth-of-type(8) {
          width: 11%;
        }
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
    }
    tbody {
      tr {
        height: 78px;
        td {
          text-align: center;
        }
        td:nth-of-type(1),
        td:nth-of-type(4),
        td:nth-of-type(5),
        td:nth-of-type(6) {
          font-size: 15px;
          font-family: DINAlternate-Bold;
          color: #222222;
        }
      }
      .text_01 {
        color: #888;
        font-size: 15px;
      }
    }
    // 商品信息
    .goodsInfo {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .avator {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
        cursor: pointer;
      }
      .goodsInfoRight {
        text-align: left;
        flex: 1;
        margin-left: 11px;
        div {
          cursor: pointer;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 18px;
            height: 18px;
            margin-right: 6px;
          }
          span {
            width: 240px;
            font-size: 14px;
            color: #222222;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            // display: -webkit-box;
            // -webkit-line-clamp: 1;
            // -webkit-box-orient: vertical;
            // letter-spacing: 0 !important;
          }
          span:hover {
            color: #ff924b;
          }
        }
        p {
          cursor: pointer;
          font-size: 14px;
          color: #888;
          text-align: left;
          padding-top: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 1;
          // -webkit-box-orient: vertical;
          span {
          }
          span:hover {
            color: #ff924b;
          }
        }
      }
    }
    // 近一小时关联直播
    .liveHourBox {
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        display: block;
        font-size: 15px;
        color: #222222;
        height: 16px;
      }
      img {
        display: block;
        width: 17px;
        height: 16px;
        margin-left: 7px;
        cursor: pointer;
      }
    }
    .price {
      font-size: 14px;
      color: #222;
      span {
        font-family: DINAlternate-Bold;
        font-size: 16px;
        color: #222;
      }
    }
  }
  .table01 {
    th:nth-of-type(1) {
      width: 7%;
    }
    th:nth-of-type(3) {
      width: 12%;
    }
    th:nth-of-type(2) {
      text-align: left;
    }
    th:nth-of-type(5) {
      width: 12%;
    }

    th:nth-of-type(7) {
      text-align: left;
      width: 25%;
      padding-left: 5%;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
// 直播间
.roomInfo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 10px 0 3%;
  .imgBox {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    position: relative;
    img {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      cursor: pointer;
      border: 1px solid #e5e5e5;
      object-fit: cover;
    }
    .liveBox {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 18px;
      height: 18px;
      background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
        linear-gradient(#ffffff, #ffffff);
      background-blend-mode: normal, normal;
      border-radius: 6px 0px 4px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      .liveText {
        font-weight: 600;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
  .roomRight {
    margin-left: 11px;
    .nameBox {
      text-align: left;
      display: flex;

      align-items: center;
      p {
        font-family: DINPro, -apple-system, BlinkMacSystemFont, Segoe UI,
          PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue,
          Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #222;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      p:hover {
        color: #ff924b;
      }
      img {
        width: 14px;
        height: 14px;
        margin-left: 6px;
      }
    }
    p {
      font-size: 14px;
      color: #888888;
      padding-top: 5px;
      text-align: left;
      span {
        white-space: nowrap;
      }
      span:first-of-type {
        padding-right: 8px;
      }
    }
    .liveListBtn {
      cursor: pointer;
      width: 94px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      background-color: #f5f9ff;
      border-radius: 4px;
      border: solid 1px #1779ff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      span {
        font-size: 13px;
        color: #1779ff;
      }
      img {
        width: 8px;
        height: 5px;
        margin-left: 5px;
      }
      // .hidden {
      //   display: none;
      // }
    }
  }
}
// 弹窗
.hotRoomBox {
  // width: 790px;
  // min-height: 690px;
  // min-height: 566px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 20px;
  // padding-bottom: 0;
  .hotRoomTitle {
    font-size: 14px;
    color: #888888;
    padding-bottom: 14px;
  }
  table {
    thead {
      tr {
        th:nth-of-type(1) {
          text-align: left;
        }
      }
    }
  }
}

.hotRoomTable {
  tbody {
    tr {
      td:nth-of-type(2),
      td:nth-of-type(3),
      td:nth-of-type(4) {
        font-family: DINAlternate-Bold;
        font-size: 15px;
        color: #222;
      }
    }
  }
}
.detailsBtnwl:hover {
  border-color: #ff924b;
  color: #ff924b;
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  right: 35px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;
  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }
  li:nth-child(3),
  li:nth-child(4),
  li:nth-child(5) li:nth-child(6) {
    text-align: center;
  }
  li:nth-child(7) {
    text-align: left;
    padding-left: 4.55%;
  }
  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: -1px;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
// 弹窗底线~
.Popupline {
  font-size: 14px;
  color: #888;
  text-align: center;
  height: 40px;
  line-height: 40px;
  padding-top: 30px;
}
</style>
